<!--
 * @Author: liuxinye
 * @Date: 2020-05-09 09:15:46
 * @LastEditors: liuxinye
 * @LastEditTime: 2020-08-18 15:13:23
 * @Description: canvas实现波浪效果
 -->
<html>
    <head>
       <title>
        
       </title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           .bg{
               
               background-color: black;
           }
       </style>
    </head>
    <body>
        <!-- 实现柏流浪效果动画 -->
        <canvas id="canvas"  class="bg"></canvas> 
        <script>
            function Point(x,y,size,color){
                 this.x=x;
                 this.y=y;
                 this.size=size;
                 this.color=color;
                 this.draw=function(ctx){
                     ctx.fillStyle=this.color;
                    //  ctx.fillRect(this.x, this.y, this.size, this.size);
                     ctx.beginPath();
                     ctx.arc(this.x, this.y, this.size/2,0,2*Math.PI,false);
                     ctx.closePath();
                     ctx.fill()
                 }
            }
            let canvas=document.getElementById('canvas');
            let ctx=canvas.getContext('2d');
            canvas.height=document.body.clientHeight;
            canvas.width=document.body.clientWidth;
            let w=canvas.width;
            let h=canvas.height;
            let points=[];
            function init(){
                for(let i=0;i<50;i++){
                    addPoint()
                }
            }
            function addPoint(){
                    let x=getRandom(0,canvas.width);
                    let y=getRandom(0,canvas.height);
                    let size=getRandom(1,5);
                    let color=`rgba(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)},1)`
                    // console.log(color)
                    points.push(new Point(x,y,size,color));
            }
            let startTime=new Date().getTime();
            function render(){
                //  ctx.clearRect(0,0,w,h)
                 ctx.fillStyle='rgba(1,1,1,.3)';
                 ctx.fillRect(0,0,w,h);
                 points.forEach((point,index)=>{
                     point.x+=getRandom(5,10);
                     point.y+=getRandom(5,10);
                     point.size+=0.2;
                     if(point.x<0||point.x>w||point.y<0||point.y>h){
                         point.x=getRandom(-w,w);
                         point.y=getRandom(-h,h);
                         point.size=getRandom(4,10);
                     }
                     point.draw(ctx);
                 })
                 requestAnimationFrame(render);
            }
            init();
            requestAnimationFrame(render);
           
            function getRandom(min,max){
                return Math.random()*(max-min)+min;
            }
            // ctx.globalCompositeOperation = 'source-over';    //目标图像上显示源图像
        </script>
    </body>
</html>